<template>
  <el-container>
    <el-aside width="auto"
              @mouseenter.native="collapseOpen"
              @mouseleave.native="collapseClose"
              class="aside-from">
      <aside-frame @changeRadio="updateTitle"></aside-frame>
    </el-aside>
    <el-container>
      <el-header id="my_header" :height="headerHeight">
        <header-frame></header-frame>
      </el-header>
      <el-main id="my_main">
        <main-frame></main-frame>
      </el-main>
      <el-footer id="my_footer">Footer</el-footer>
    </el-container>
  </el-container>
</template>
<script>
import AsideFrame from '../asideFrame/AsideFrame'
import HeaderFrame from '../headerFrame/HeaderFrame'
import MainFrame from '../mainFrame/MainFrame'
export default {
  name: 'BaseFrame',
  data () {
    return {
      collapseBtnClick: false,
      isCollapse: true,
      headerHeight: 89
    }
  },
  methods: {
    updateTitle (e) {
      // 声明这个函数
      console.log(e, '---->')
    },
    collapseStatus () {
      this.collapseBtnClick = this.isCollapse
      this.isCollapse = !this.isCollapse
    },
    collapseOpen () {
      if (this.collapseBtnClick) {
        return
      }
      this.isCollapse = false
    },
    collapseClose () {
      if (this.collapseBtnClick) return
      this.isCollapse = true
    }
  },
  components: { AsideFrame, HeaderFrame, MainFrame }
}
</script>
<style>
.el-container {
  height: 100%;
}

.aside-from {
  background-color:#545c64;
}

#my_header {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  height: 89px;
}

#my_main {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  height: 70%;
}

#my_footer {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  height: 70;
}
</style>